<template>
	<!-- 拼单-我一起付款 -->
	<view class="relative">
		<view class="au_imList">
			<view class="isNull">微信好友一起点餐 共享优惠吧</view>
      <view class="aut_list flex justify-center align-center">
				<view class="au_item" v-for="(item,index) in orderInfo" :key="index" v-show="isOrder">
					  <image :src="item.userAut" class="au_ims" v-if="item.userAut"></image>
						<view v-else class="isEnd flex justify-center align-center">?</view>
						<view class="sendUser" v-if="item.userId==loginUserIds&&isOrder">发起人</view>
				</view>
			</view>  
			<view class="yq_btn flex justify-center align-center"><text class="fcon-new" style="margin-right:10rpx;font-weight: 400;"></text>邀请好友</view>
		</view>
   <view class="list_tit">拼单列表</view>
  	<scroll-view class="list_box" scroll-y scroll-with-animation>
  		<view class="box_item" v-for="(item,index) in orderInfo" :key="index" v-show="item.userId!='-1'">
  			<view class="item_user flex justify-between align-center">
  				 <view class="u_inf flex">
						 <view class="u_img">
						 	<image :src="item.userAut" class="u_is"></image>
						 </view>
						 <view class="u_na">{{item.usaerName}}</view>
						 <view class="mySelf" v-if="item.userId==loginUserIds">我</view>
					 </view>
					 <view class="btn_edits" v-if="item.userId==loginUserIds&&!isOrder" @click="toMenu">去点餐</view>	
  				 <view class="u_action" v-else>
  				 	  <view v-if="item.userId==loginUserIds" class="flex">
  				 	  	<view class="btn_clear" @click="clearCar">清空</view>
                <view class="btn_edit" @click="toMenu">修改商品</view>
  				 	  </view>
							<view v-else><text class="fcon-a-Frame427320510" style="font-size: 34rpx;"></text> </view>
  				 </view>
						
  			</view>
				<view class="shop_list" v-for="(it,ind) in item.carList" key="ind"  v-if="isOrder">
					   <view class="shop_base_info">
					   	   <view class="ba_name">{{it.shopName}} </view>
								 <view class="ba_num">X{{it.shopNum}}</view>
					   	   <view class="ba_pri"><text style="font-size: 20rpx;margin-right: 6rpx;">¥</text>{{it.shopPrice}}</view> 
					   </view>
						 <view class="base_kcal">
							 <text class="kc_spe">{{it.shopSpe}}</text>
							 <text class="cuIcon-title" style="color: #4F585E;"></text>
							 <text class="kc_k">{{it.kacl}}Kcal</text>
						 </view>
				</view>
				<view style="margin-left: 20rpx;color: #333;font-size: 32rpx;margin-top:20rpx;" v-else>暂时没有点餐</view>
					
				
				<view class="pack_cost" v-if="isOrder">
					 <view class="pc_text">包装费</view>
					 <view class="pc_text"> <text class="margin-right: 6rpx;">¥</text>{{item.packing}}</view>
				</view>
  		</view>
  	</scroll-view>
		<view class="balance_box" :style="{zIndex:'101'}">
			<view class="bottom_balance">
				<view class="amount">
					<text class="unit">¥</text>
					<text class="totalPay"><text>{{isOrder?'20':'0'}}</text></text>
				</view>
				<view class="reduction">
					<view class="totalReduce">¥30</view>
					<view class="deliveryFee">已含配送费3元</view>
				</view>
				<view class="submitBtn" :style="{backgroundColor:isOrder?'':'#999999'}">
					<view @click="toSub"> <text>{{isOrder?'去结算':'满28起送'}} </text></view>
				</view>
			</view>
		</view>
		<view class="unBala" :style="{zIndex:'100'}" v-if="isOrder">
			<view class="unB_text">
				  您的<text class="t_tt">1</text>位朋友已完成拼单
			</view>
		</view>
	<uni-popup ref="isfavRef" type="center" borderRadius="16px 16px 0 0" zindex>
	  <view class="modelcon">
			 <view class="favs">确认结算</view>
	  	 <view class="fav_v">去结算后，其他人将不可加入或修改商品哦。</view>
			 <view class="foot_btn">
			 	  <view class="btns can" @click="cals(false)">取消</view>
					<view class="btns su" @click="cals(true)">确定</view>
			 </view>
	  </view>
	</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	const imgBaseUrl = ref("https://cdn-static.yekjx.com/food/images/")
	const loginUserIds=ref("100001")
	const isOrder=ref(true)
	const isfavRef=ref()
	const orderInfo = ref([
		{
			userId:"100001",
			userAut: imgBaseUrl.value + "ushead.png",//用户头像
			usaerName: "Jynn",//用户名
			carList: [
				// {
				// 	shopName: "山茶油黄焖香剪黄鸭",//商品名称
				// 	shopNum: 1,//商品数量
				// 	shopPrice: "99.0",//商品价格
				// 	shopSpe: "1条/份",//商品规格
				// 	kacl: "111",//商品卡路里
				// },{
				// 	shopName: "铁板烤鸭",//商品名称
				// 	shopNum: 1,//商品数量
				// 	shopPrice: "20.0",//商品价格
				// 	shopSpe: "1只/份",//商品规格
				// 	kacl: "500",//商品卡路里
				// }
			],
			packing: "1",//包装费
		},
		// {
		// 	userId:"100002",
		// 	userAut: imgBaseUrl.value + "car_img01.png",//用户头像
		// 	usaerName: "fLQ173028328",//用户名
		// 	carList: [
		// 		{
		// 			shopName: "手撕鸡",//商品名称
		// 			shopNum: 1,//商品数量
		// 			shopPrice: "17.0",//商品价格
		// 			shopSpe: "小小份(约100g)",//商品规格
		// 			kacl: "178",//商品卡路里
		// 		}
		// 	],
		// 	packing: "1",//包装费
		// }, {
		// 	userId:"-1",
		// 	userAut:"",
		// 	usaerName: "",//用户名
		// 	carList: [],
		// 	packing: "1",//包装费
		// }
	])
	
	onLoad((options)=>{
		if(options.addItem=='1'){
			orderInfo.value=[
				{
					userId:"100001",
					userAut: imgBaseUrl.value + "ushead.png",//用户头像
					usaerName: "Jynn",//用户名
					carList: [
						{
							shopName: "山茶油黄焖香剪黄鸭",//商品名称
							shopNum: 1,//商品数量
							shopPrice: "18.0",//商品价格
							shopSpe: "1条/份",//商品规格
							kacl: "111",//商品卡路里
						},{
							shopName: "铁板烤鸭",//商品名称
							shopNum: 1,//商品数量
							shopPrice: "18.0",//商品价格
							shopSpe: "1只/份",//商品规格
							kacl: "500",//商品卡路里
						}
					],
					packing: "1",//包装费
				},
				{
					userId:"100002",
					userAut: imgBaseUrl.value + "car_img01.png",//用户头像
					usaerName: "fLQ173028328",//用户名
					carList: [
						{
							shopName: "手撕鸡",//商品名称
							shopNum: 1,//商品数量
							shopPrice: "17.0",//商品价格
							shopSpe: "小小份(约100g)",//商品规格
							kacl: "178",//商品卡路里
						}
					],
					packing: "1",//包装费
				}, {
					userId:"-1",
					userAut:"",
					usaerName: "",//用户名
					carList: [],
					packing: "1",//包装费
				}
			]
		}
		let result:any=orderInfo.value.find(order => order.userId === loginUserIds.value)
		if(result.carList.length==0){
			 isOrder.value=false
		}else{
			isOrder.value=true
		}
	
	})
	const toSub=()=>{
		if(!isOrder.value){
			return
		}
		isfavRef.value.open()
	}
	const changeRoute=(url:any)=>{
		uni.switchTab({
			url: url
		});
	}
	const cals=(isRouter:any)=>{
		if(isRouter){
			mnavTo('/pages/order/creatOrder/creatOrder?spo=0')
			return
		}
		isfavRef.value.close()
	}
	const toMenu=()=>{
		uni.switchTab({
			url:"/pages/index/menu/menu"
		})
	}
	const clearCar=()=>{
		orderInfo.value=[
			{
				userId:"100001",
				userAut: imgBaseUrl.value + "ushead.png",//用户头像
				usaerName: "Jynn",//用户名
				carList: [
					// {
					// 	shopName: "山茶油黄焖香剪黄鸭",//商品名称
					// 	shopNum: 1,//商品数量
					// 	shopPrice: "99.0",//商品价格
					// 	shopSpe: "1条/份",//商品规格
					// 	kacl: "111",//商品卡路里
					// },{
					// 	shopName: "铁板烤鸭",//商品名称
					// 	shopNum: 1,//商品数量
					// 	shopPrice: "20.0",//商品价格
					// 	shopSpe: "1只/份",//商品规格
					// 	kacl: "500",//商品卡路里
					// }
				],
				packing: "1",//包装费
			},
		]
		isOrder.value=false
	}
</script>

<style lang="scss" scoped>
	.au_imList {
		width: 100%;
		height: 408rpx;
		background-color: #fff;
		padding: 40rpx 0rpx 10rpx 0rpx;
		.isNull{
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 400;
			text-align: center;
		}
		.aut_list{
			width: 100%;
			height:98rpx;
			margin-top: 40rpx;
			padding:0rpx 20rpx 0rpx 20rpx;
			.au_item{
				width: 97rpx;
				height:97rpx;
				border-radius: 50%;
				position: relative;
	      &:nth-child(n+2){
					margin-left:30rpx;
				}
				.sendUser{
					position: absolute;
					bottom:-15rpx;
					left: 0;
					width: 88rpx;
					height: 36rpx;
					border-radius: 34rpx;
					background-color: #FE270B;
					color: #FFF;
					font-family: "Microsoft YaHei UI";
					font-size:24rpx;
					font-weight: 400;
					text-align: center;
					line-height: 36rpx;
				}
				.au_ims{
					width:100%;
					height:100%;
					border-radius: 50%;
				}
				.isEnd{
					width:100%;
					height:100%;
					border:2rpx dashed #D9D9D9;
					border-radius: 50%;
					color: rgba(217, 217, 217, 0.60);
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}
		.yq_btn{
			width:700rpx;
			height: 90rpx;
			border-radius: 10rpx;
			background: #53A87F;
			margin:40rpx auto;
			color: #FFF;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 700;
		}
	}
 .list_tit{
	 color: #666;
	 font-family: "Microsoft YaHei UI";
	 font-size:28rpx;
	 font-weight: 400;
	 margin:30rpx 20rpx 30rpx 20rpx;
 }
 .list_box{
	 width: 100vw;
	 height: calc(100vh - 750rpx);
	 .box_item{
		 width: 100%;
		 min-height:296rpx;
		 background-color: #fff;
		 padding: 10rpx 0rpx 10rpx 0rpx;
		 &:nth-child(n+2){
			  margin-top: 15rpx;
		 }
		 .item_user{
			 width: 100%;
			 height:90rpx;
			 border-bottom: 2rpx solid #F8F8F8;
			 padding: 0rpx 30rpx 0rpx 20rpx;
			 .u_inf{
				  .u_img{
				  width: 60rpx;
				  height:60rpx;
					.u_is{
						width:100%;
						height:100%;
						border-radius: 50%;
					}
			  }
				.u_na{
					color: #333;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
					margin:11rpx 0rpx 0rpx 20rpx;
				}
				.mySelf{
					color: #999;
					min-width: 42rpx;
					height: 42rpx;
					border-radius: 8rpx;
					border: 2rpx solid #999;
					text-align: center;
					line-height:38rpx;
					margin:11rpx 0rpx 0rpx 10rpx;
				}
			 }
			 .u_action{
					 .btn_clear{
						 width: 88rpx;
						 height:52rpx;
						 border: 2rpx solid #999;
						 text-align: center;
						 line-height:52rpx;
						 border-radius: 10rpx;
						 color: #999;
						 font-family: "Microsoft YaHei UI";
						 font-size: 28rpx;
						 font-weight: 400;
						 margin-right:20rpx;
					 }
					 .btn_edit{
						 width: 152rpx;
						 height:52rpx;
						 text-align: center;
						 line-height:52rpx;
						 border-radius: 10rpx;
						 color: #FFF;
						 font-family: "Microsoft YaHei UI";
						 font-size: 28rpx;
						 font-weight: 400;
						 background: #53A87F;
					 }
			 }

		 }
	 }
	 .shop_list{
		 width: 100%;
		 min-height: 20rpx;
		 border-bottom:1rpx solid #F8F8F8;
		 padding:15rpx 30rpx 10rpx 93rpx;
		 .shop_base_info{
			 display: flex;
			 justify-content: space-between;
			 margin-top: 6rpx;
			 .ba_num{
				 color: #666;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
				 margin-top: 7rpx;
			 }
			 .ba_name{
				 color: #333;
				 font-family: "Microsoft YaHei UI";
				 font-size: 32rpx;
				 font-weight: 400;
				 min-width: 440rpx;
			 }
			 .ba_pri{
				 color: #333;
				 font-family: "Microsoft YaHei UI";
				 font-size: 36rpx;
				 font-weight: 700;
				 min-width: 120rpx;
				 text-align: right;
			 }
		 }
		 .base_kcal{
			  margin-top: 6rpx;
			 .kc_spe{
				 color: #666;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
			 }
			 .kc_k{
				 color:#9B9B9B;
				 font-family: "Microsoft YaHei UI";
				 font-size: 28rpx;
				 font-weight: 400;
			 }
		 }
	 }
	 .pack_cost{
		  width: 100%;
	 	  display: flex;
	 	  justify-content: space-between;
	 	  margin-top: 6rpx;
			padding:15rpx 30rpx 0rpx 93rpx;
	 	  .pc_text{
	 	 	 color: #333;
	 	 	 font-family: "Microsoft YaHei UI";
	 	 	 font-size: 32rpx;
	 	 	 font-weight: 400;
	 	  }
	 }
 }
 .unBala{
	 width: 722rpx;
	 height: 122rpx;
	 position: absolute;
	 bottom: 120rpx;
	 left: 16rpx;
	 border-radius: 20rpx;
	 background: #FEF9E3;
	 text-align: center;
	 padding-top: 20rpx;
	 .unB_text{
		 color: #333;
		 font-family: "Microsoft YaHei UI";
		 font-size: 24rpx;
		 font-style: normal;
		 font-weight: 400;
		 line-height: normal;
		 .t_tt{
			 color: #FC4C40;
			 font-family: "Microsoft YaHei UI";
			 font-size: 24rpx;
			 font-weight: 400;
			 margin: 0rpx 15rpx 0rpx 15rpx;
		 }
	 }
 }
	.balance_box {
		width: 722rpx;
		height: 100rpx;
		position: absolute;
		bottom: 80rpx;
		left: 16rpx;
		z-index: 101;
		.bottom_balance {
			width: 100%;
			height: 98rpx;
			border-radius: 104rpx;
			background: #231F20;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.30);
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			align-items: center;

			.imagess {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				bottom: 30rpx;
				left: 10rpx;
			}

			.total {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.amount {
			min-width: 165rpx;
			height: 76rpx;
			margin-left: 50rpx;

			.unit {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: 90rpx;
			}

			.totalPay {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 60rpx;
				font-style: normal;
				font-weight: 700;
				margin-left: 8rpx;
			}
		}

		.reduction {
			width: 207rpx;
			height: 60rpx;
			margin-left: 0rpx;

			.totalReduce {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				text-decoration: line-through;
			}

			.deliveryFee {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				opacity: .6;
			}
		}

		.submitBtn {
			width: 202rpx;
			height: 92rpx;
			border-radius: 36px;
			background: #53A87F;
			text-align: center;
			line-height: 92rpx;
			color: #FFF;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			margin-left: auto;
			margin-right: 5rpx;
		}

	}
	.btn_edits{
		width: 152rpx;
		height:52rpx;
		text-align: center;
		line-height:52rpx;
		border-radius: 10rpx;
		color: #FFF;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-weight: 400;
		background: #53A87F;
	}
	.modelcon{
		width:560rpx;
		height: 340rpx;
		padding-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.favs{
			text-align: center;
			color: #000;
			font-family: "Microsoft YaHei UI";
			font-size:36rpx;
			font-weight: 400;
		}
		.fav_v{
			padding: 20rpx 25rpx 0rpx 25rpx;
			text-align: left;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size:32rpx;
			font-weight: 400;
		}
		.foot_btn{
			display: flex;
			padding: 60rpx 35rpx 0rpx 35rpx;
			justify-content: space-between;
			.btns{
				width: 208rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
			}
			.su{
				background:#53A87F;
				color: #fff;
			}
			.can{
				border:2rpx solid #53A87F;
				color: #53A87F;
			}
		}
	}
</style>